<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<layout:override name="${pageHead}">
    <!-- DataTables CSS -->
    <link href="${css}/dataTables.bootstrap.css" rel="stylesheet">
    <!-- DataTables Responsive CSS -->
    <link href="${css}/dataTables.responsive.css" rel="stylesheet">
</layout:override>
<layout:override name="${pageContents}">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">医院资料录入</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        DataTables Advanced Tables
                    </div>
                    <!-- /.panel-heading -->
                    <div class="panel-body">

                        <form class="form-horizontal">
                            <div class="form-group">
                                <label for="largeArea" class="col-sm-2 control-label">地区</label>
                                <div class="col-sm-10">
                                    <select id="largeArea" class="form-control">
                                        <option value="">大区</option>
                                        <c:forEach items="${largeAreaList}" var="largeArea">
                                            <option value="${largeArea.largeAreaCode}">${largeArea.largeAreaName}</option>
                                        </c:forEach>
                                    </select>
                                    <select id="provinceArea" class="form-control">
                                        <option value="">省</option>
                                    </select>
                                    <select id="cityArea" class="form-control">
                                        <option value="">市</option>
                                    </select>
                                    <select id="countyArea" class="form-control">
                                        <option value="">县</option>
                                    </select>
                                    <select id="townArea" class="form-control">
                                        <option value="">镇</option>
                                    </select>
                                    <select id="villageArea" class="form-control">
                                        <option value="">村</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="name" class="col-sm-2 control-label">医院名称</label>

                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="name" name="name"
                                           placeholder="请输入医院名称">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="level" class="col-sm-2 control-label">医院等级</label>
                                <div class="col-sm-10">
                                    <select id="level" name="level" class="form-control">
                                        <option value="">请选择...</option>
                                        <c:forEach items="${hospLvlList}" var="level">
                                            <c:if test="${not level.isDel}">
                                                <option value="${level.code}">${level.name}</option>
                                            </c:if>
                                        </c:forEach>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="hosType" class="col-sm-2 control-label">医院类别</label>
                                <div class="col-sm-10">
                                    <select id="hosType" name="hosType" class="form-control">
                                        <option value="">请选择...</option>
                                        <option value="2">乡一级</option>
                                        <option value="1">村一级</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button type="submit" class="btn btn-default">保存</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- /.panel-body -->
                </div>
                <!-- /.panel -->
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
</layout:override>
<%@ include file="/WEB-INF/jsp/admin/layout_admin.jsp" %>
<!-- jQuery -->
<script src="${js}/jquery-1.9.1.min.js"></script>
<layout:block name="${pageScript}">
    <!-- DataTables JavaScript -->
    <script src="${js}/jquery.dataTables.js"></script>
    <script src="${js}/dataTables.bootstrap.js"></script>
</layout:block>

<script type="text/javascript">
    $(function () {
        $("#largeArea").change(function() {
            if(this.value==null || this.value==""){
                resetArea(0);
            }else{
                getLowerAreaList("provinceArea",this.value,0);
            }
        });
        $("#provinceArea").change(function() {
            if(this.value==null || this.value==""){
                resetArea(1);
            }else{
                getLowerAreaList("cityArea",this.value,1);
            }
        });
        $("#cityArea").change(function() {
            if(this.value==null || this.value==""){
                resetArea(2);
            }else{
                getLowerAreaList("countyArea",this.value,2);
            }
        });
        $("#countyArea").change(function() {
            if(this.value==null || this.value==""){
                resetArea(3);
            }else{
                getLowerAreaList("townArea",this.value,3);
            }
        });
        $("#townArea").change(function() {
            if(this.value==null || this.value==""){
                resetArea(4);
            }else{
                getLowerAreaList("villageArea",this.value,4);
            }
        });

        function getLowerAreaList(id,code,level){
            $.ajax({
                url:'${ctx}/area/getLowerAreaList',
                type:'post',
                data:'code='+code+"&level="+level,
                async : false, //默认为true 异步
                error:function(){
                    alert('error');
                },
                success:function(data){
                    var objs = document.getElementById(id);
                    objs.options.length = 1;

//                    var area = eval("(" + data+ ")");
                    var area = data;
                    for(var i=0;i<area.length;i++){
                        var childOption = document.createElement("option");
                        childOption.value = area[i].code;
                        childOption.innerHTML = area[i].name;
                        objs.appendChild(childOption);
                    }
                }
            });
        }

        //重置下级菜单
        function resetArea(level){
            if(level<1){
                var provinceArea = document.getElementById("provinceArea");
                provinceArea.options.length = 1;
            }
            if(level<2){
                var cityArea = document.getElementById("cityArea");
                cityArea.options.length = 1;
            }
            if(level<3){
                var countyArea = document.getElementById("countyArea");
                countyArea.options.length = 1;
            }
            if(level<4){
                var townArea = document.getElementById("townArea");
                townArea.options.length = 1;
            }
            if(level<5){
                var villageArea = document.getElementById("villageArea");
                villageArea.options.length = 1;
            }
        }
    });

</script>